<template>
    <div class="process">
        <div class="process-search">
            <div class="aaa" style="border-right: 1px solid darkgray">
                <div class="b">
                    流程名称：
                </div>
            </div>
            <div class="bbb">
                <ul class="bbb-i">
                    <li>
                        流程名称：<el-input class="sh" placeholder="流程名称或前缀" v-model="search.keyword"></el-input>
                    </li>
                    <li>
                        创建时间：<el-date-picker v-model="search.date" type="daterange" size="default"
                                             start-placeholder="开始时间"
                                             end-placeholder="结束时间" clearable class="picker"/>
                    </li>
                    <li style="margin-left: 30px">
                        <div class="search-bn">
                            <el-tooltip placement="top" content="清空搜索框">
                                <el-button type="default" :icon="Refresh" @click="clearSearchParam">重置</el-button>
                            </el-tooltip>
                            <el-button type="primary" :icon="Search" @click="searchActive">搜索</el-button>
                        </div>
                    </li>
                </ul>
                <ul style="margin-left: 10px;">
                    <li>
                        <el-button :icon="Plus" type="primary" @click="addProcessClick" plain>新增流程</el-button>
                        <el-button :icon="Delete" type="danger" @click="removeClick(null)" plain>删除</el-button>
                    </li>
                    <li style="float: right;">
                        <div class="bbb-operate">
                            <el-tooltip effect="dark" placement="top-start" content="清空选择">
                                <el-button @click="clearSelection" type="default" :icon="Collection" circle/>
                            </el-tooltip>
                            <el-tooltip effect="dark" placement="top-start" content="刷新表格">
                                <el-button type="default" @click="refreshData(true)" :icon="RefreshRight" circle/>
                            </el-tooltip>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <el-table :data="proData" ref="processTable" v-loading="loading" element-loading-text="正在加载流程数据" @selection-change="saveSelection">
            <el-table-column type="selection" width="40" />
            <el-table-column type="expand" width="30">
                <template #default="s">
                    <process-node :process-id="s.row.id"/>
                </template>
            </el-table-column>
            <el-table-column label="编号" prop="id" width="60"/>
            <el-table-column label="名称" prop="name" width="120px" show-overflow-tooltip/>
            <el-table-column label="前缀" prop="prefix" width="120px"/>
            <el-table-column label="规则" prop="rule" show-overflow-tooltip/>
            <el-table-column label="创建时间" prop="createTime" width="200px"/>
            <el-table-column label="操作" width="160px">
                <template #default="s">
                    <el-button type="text" :icon="Edit" @click="editClick(s.row)">修改</el-button>
                    <el-button type="text" :icon="Delete" @click="removeClick(s.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <process-form ref="processForm" width="40%" @refresh-data="refreshData"/>
</template>

<script>
import {Search,Refresh,RefreshRight,CollectionTag,Collection,Delete,Plus,Edit,DArrowRight,Picture,Failed,View,Upload,Download} from '@element-plus/icons-vue'
import {deleteProcess, getProcessList} from "../../../network/sys/process";
import ProcessNode from "./ProcessNode.vue";
import {ElMessage} from "element-plus";
import ProcessForm from "./form/ProcessForm.vue";

export default {
    name: "ProcessTable",
    components: {ProcessForm, ProcessNode},
    setup(){
        return{
            Collection,
            Search,
            Refresh,
            RefreshRight,
            CollectionTag,
            Delete,
            Plus,
            Edit,
            DArrowRight,
            Picture,
            Failed,
            View,
            Download,
            Upload
        }
    },
    props:['classifyId'],
    data(){
        return{
            search:{
                keyword: null,
                date: null
            },
            proData: [],
            loading: false,
            selection: []
        }
    },
    methods:{
        saveSelection(selection){
            this.selection = selection;
        },
        addProcessClick(){
            let frm = this.$refs.processForm;
            frm.title = '新增流程';
            frm.type = 0;
            frm.visible = true;
            this.$nextTick(function (){
                frm.setProcess({
                    classifyId: this.classifyId
                })
            })
        },
        editClick(row){
            let frm = this.$refs.processForm;
            frm.title = '修改流程';
            frm.type = 1;
            frm.visible = true;
            this.$nextTick(function (){
                frm.setProcess(row);
            })
        },
        removeClick(row){
            console.log('row',row)
            if(row){
                this.$operate.remove({
                    title: '删除流程',
                    data: `' ${row.name} '`,
                    executeFn: ()=>{
                        this.remove([row.id])
                    }
                })
            }else{
                this.$operate.removeBatch({
                    title: '删除流程',
                    selection: this.selection,
                    key: 'id',
                    executeFn: (ids)=>{
                        this.remove(ids);
                    }
                })
            }
        },
        remove(ids){
            deleteProcess(ids).then(vo=>{
                this.$response.handle({
                    data: vo,
                    success: '删除成功',
                    successFn: ()=>{
                        this.refreshData();
                    },
                    log: '删除结果'
                })
            })
        },
        refreshData(hint){
            this.loadProcessList(hint);
        },
        clearSelection(){
            this.$refs.processTable.clearSelection();
        },
        clearSearchParam(){
            this.$utils.resetSearchParams({
                data: this.search,
                initData: this.$options.data.call(this).search,
                hint:true,
                callback: ()=>{
                    Object.assign(this.search,this.$options.data.call(this).search);
                    this.loadProcessList();
                }
            })
        },
        searchActive(){
            this.$utils.searchActive({
                data: this.search,
                initData: this.$options.data.call(this).search,
                executeFn:()=>{
                    this.loadProcessList();
                }
            })
        },
        loadProcessList(hint){
            this.loading = true;
            getProcessList({
                classifyId: this.classifyId,
                keyword: this.search.keyword,
                start: this.search.date==null ? null : new Date(this.search.date[0]).format('yyyy-MM-dd'),
                end: this.search.date==null ? null : new Date(this.search.date[1]).format('yyyy-MM-dd'),
            }).then(vo=>{
                this.loading = false;
                this.$response.handle({
                    data: vo,
                    log: '流程数据',
                    successFn: ()=>{
                        this.proData = vo.data;
                        if(hint){
                            ElMessage.success('刷新成功');
                        }
                    }
                })
            })
        },
        init(){
            this.loadProcessList();
        }
    },
    created() {
        this.init();
    },
    watch:{
        classifyId(newVal,oldVal){
            // console.log()
            this.loadProcessList();
        }
    }
}
</script>

<style scoped>
/**{*/
/*    border: 1px solid red;*/
/*}*/
.process{
    width: 100%;
    height: 500px;
    margin-top: 2px;
}
.process-search{
    width: 100%;
    height: 100px;
    display: flex;
    border: 1px solid darkgray;
    border-top: none;
    box-sizing: border-box;
}
.sh{
    width: 200px;
}
.aaa{
    width: 120px;
    height: 100%;
    float: left;
}
.aaa .b{
    margin: 10px;
}
.bbb{
    width: 100%;
}
.bbb-i{
    padding: 10px;
    box-sizing: border-box;
}
.bbb-operate{
    float: right;
    width: 100px;
}
</style>